<script setup lang="ts">
import type { TinyMCE } from "tinymce/tinymce";
import { ref } from "vue";
import Editor from "@tinymce/tinymce-vue"; // 引入组件

const useDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;

const isSmallScreen = window.matchMedia("(max-width: 1023.5px)").matches;

console.log(isSmallScreen);

const tinymceHtml = ref<string>("");
const init: Parameters<TinyMCE["init"]>[0] = {
  selector: "textarea",
  promotion: false,
  help_accessibility: false,
  branding: false,
  language: "zh-Hans",
  codesample_global_prismjs: true,
  codesample_languages: [
    { text: "HTML/XML", value: "markup" },
    { text: "JavaScript", value: "javascript" },
    { text: "CSS", value: "css" },
    { text: "PHP", value: "php" },
    { text: "Ruby", value: "ruby" },
    { text: "Python", value: "python" },
    { text: "Java", value: "java" },
    { text: "C", value: "c" },
    { text: "C#", value: "csharp" },
    { text: "C++", value: "cpp" },
    { text: "Bash", value: "bash" },
  ],
  plugins:
    "preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons accordion",
  editimage_cors_hosts: ["picsum.photos"],
  menubar: "file edit view insert format tools table help",
  toolbar:
    "undo redo | accordion accordionremove | blocks fontfamily fontsize | bold italic underline strikethrough | align numlist bullist | link image | table media | lineheight outdent indent| forecolor backcolor removeformat | charmap emoticons | code fullscreen preview | save print | pagebreak anchor codesample | ltr rtl",
  autosave_ask_before_unload: true,
  autosave_interval: "30s",
  autosave_prefix: "{path}{query}-{id}-",
  autosave_restore_when_empty: false,
  autosave_retention: "2m",
  image_advtab: true,
  images_upload_url: "http://127.0.0.1:8080/upload",
  save_oncancelcallback: () => {
    console.log("Save canceled");
  },
  save_onsavecallback: () => {
    console.log("Saved");
  },
  link_list: [
    { title: "Gitee", value: "https://gitee.com/" },
    { title: "Github", value: "https://github.com/" },
  ],
  image_list: [
    {
      title: "头像",
      value: "http://pic.imeitou.com/uploads/allimg/231010/10-2310101F627.jpg",
    },
    {
      title: "头像2",
      value: "http://pic.imeitou.com/uploads/allimg/231010/10-2310101F623.jpg",
    },
  ],
  image_class_list: [
    { title: "None", value: "" },
    { title: "Some class", value: "class-name" },
  ],
  importcss_append: true,
  file_picker_callback: (callback, value, meta) => {
    console.log(value);
    /* Provide file and text for the link dialog */
    if (meta.filetype === "file") {
      callback(
        "http://pic.imeitou.com/uploads/allimg/231010/10-2310101F623.jpg",
        { text: "查看图片" }
      );
    }

    /* Provide image and alt text for the image dialog */
    if (meta.filetype === "image") {
      callback(
        "http://pic.imeitou.com/uploads/allimg/231010/10-2310101F623.jpg",
        {
          alt: "图像加载失败",
        }
      );
    }

    /* Provide alternative source and posted for the media dialog */
    if (meta.filetype === "media") {
      callback("movie.mp4", {
        source2: "alt.ogg",
        poster:
          "http://pic.imeitou.com/uploads/allimg/231010/10-2310101F623.jpg",
      });
    }
  },
  templates: [
    {
      title: "表格模板",
      description: "创建新的表格",
      content:
        '<div class="mceTmpl"><table width="98%%"  border="0" cellspacing="0" cellpadding="0"><tr><th scope="col"> </th><th scope="col"> </th></tr><tr><td> </td><td> </td></tr></table></div>',
    },
    {
      title: "故事模板",
      description: "一个简单的模板",
      content: "从前从前...",
    },
    {
      title: "包含日期的列表",
      description: "列表模板",
      content:
        '<div class="mceTmpl"><span class="cdate">cdate</span><br><span class="mdate">mdate</span><h2>列表</h2><ul><li></li><li></li></ul></div>',
    },
  ],
  template_cdate_format: "[创建日期: %m/%d/%Y : %H:%M:%S]",
  template_mdate_format: "[修改日期: %m/%d/%Y : %H:%M:%S]",
  height: 600,
  image_caption: true,
  quickbars_selection_toolbar:
    "bold italic | quicklink h2 h3 blockquote quickimage quicktable",
  noneditable_class: "mceNonEditable",
  toolbar_mode: "sliding",
  contextmenu: "link image table",
  skin: useDarkMode ? "oxide-dark" : "oxide",
  content_css: useDarkMode ? "dark" : "default",
  content_style:
    "body { font-family:Helvetica,Arial,sans-serif; font-size:16px }",
};
// 获取内容
function getContent() {
  console.log(tinymceHtml.value);
}
</script>

<template>
  <Editor id="tinymce" v-model="tinymceHtml" :init="init" />

  <button @click="getContent()">获取内容</button>
</template>

<style scoped>
.app-editor {
  margin: 20px;
}
</style>
